import React from 'react';
import {Menu, MenuItem, MenuItemLabel, Pressable} from "@gluestack-ui/themed";
import {IMenuProps} from "@gluestack-ui/menu/src/types";
import useTool from "@/utils";
import {DropDownMenuProps} from "@/components/k-view/drop-down-menu/type";

const DropDownMenu = <M, >(props: DropDownMenuProps<M>) => {
    const {deObjectKey} = useTool();
    const {
        children,
        menus,
        itemRender,
        width
    } = props;



    return (
        <Menu
            pt={0}
            pb={0}
            placement="bottom"
            selectionMode="single"
            {...deObjectKey(props, ['children'], true)}
            width={width}
            trigger={(_props: IMenuProps) => {
                return (
                    <Pressable {..._props}>
                        {children}
                    </Pressable>
                )
            }}
        >
            {
                menus.map((item, index) => (
                    <MenuItem p={0} key={index} textValue={String(index)}>
                        {
                            itemRender
                                ?
                                itemRender(item, index)
                                :
                                (<MenuItemLabel size='sm'>
                                    {item as string}
                                </MenuItemLabel>)
                        }

                    </MenuItem>
                ))
            }
        </Menu>
    );
};

export default DropDownMenu;